<template>
  <div class="systemLog" style="height: 100%">
    <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
      <el-tab-pane label="系统日志" name="first">
      </el-tab-pane>
      <el-tab-pane label="登录日志" name="second"></el-tab-pane>
      <el-tab-pane label="操作日志" name="third"></el-tab-pane>
    </el-tabs>
    <div class="logList" v-if="activeName=='first'" style="height: 100%">
      <el-row style="height: 100%">
        <el-col :span="4" style="height: 100%;border-right: 1px solid #eee">
          <CommonTree label-name="文件目录" :tree-props="treeProps" :data="treeData"></CommonTree>
        </el-col>
        <el-col :span="20">
          <div class="main-label">
            未选择文件目录-记事本
            <span  class="clear-btn" @click="clearLog">清除</span>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="loginLog" v-if="activeName=='second'">
      <CommonList ref="list"
                  :columns="columns" :listUrl="$api.API_RMBASE_SYSTEM_LOGINLOG"  :conditions="conditions">
         <div slot="appendCondition">
           <el-form :inline="true" class="demo-form-inline">
             <el-form-item label="登录账户">
               <el-input  placeholder="登录账户" v-model="userAccount" @change="conditionsChange($event,'userAccount')"></el-input>
             </el-form-item>

             <el-form-item label="登录日期">
               <el-date-picker
                 type="week"
                 format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                 v-model="start"
                 placeholder="选择日期" @change="conditionsChange($event,'start')"></el-date-picker> -
               <el-date-picker
                 type="date"
                 format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                 v-model="end"
                 placeholder="选择日期" @change="conditionsChange($event,'end')"></el-date-picker>
             </el-form-item>
             <el-form-item>
               <el-button type="primary" @click="onSubmit">查询</el-button>
             </el-form-item>
           </el-form>
         </div>
      </CommonList>
    </div>

    <!-- 操作日志 -->
    <div class="loginLog" v-if="activeName=='third'">
      <CommonList ref="list"
                  :columns="operationColumns" :listUrl="$api.API_RMBASE_SYSTEM_OPERATELOGLIST"  :conditions="conditions">
         <div slot="appendCondition">
           <el-form :inline="true" class="demo-form-inline">
             <el-form-item label="操作账户">
               <el-input  placeholder="操作账户" v-model="userAccount" @change="conditionsChange($event,'userAccount')"></el-input>
             </el-form-item>

             <el-form-item label="操作模块">
               <el-input  placeholder="操作模块" v-model="module" @change="conditionsChange($event,'module')"></el-input>
             </el-form-item>

             <el-form-item label="操作功能">
               <el-input  placeholder="操作功能" v-model="description" @change="conditionsChange($event,'description')"></el-input>
             </el-form-item>

             <el-form-item label="操作日期">
               <el-date-picker
                 type="week"
                 format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                 v-model="startTime"
                 placeholder="选择日期" @change="conditionsChange($event,'startTime')"></el-date-picker> -
               <el-date-picker
                 type="date"
                 format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                 v-model="endTime"
                 placeholder="选择日期" @change="conditionsChange($event,'endTime')"></el-date-picker>
             </el-form-item>
             <el-form-item>
               <el-button type="primary" @click="onSubmit">查询</el-button>
             </el-form-item>
           </el-form>
         </div>
      </CommonList>
    </div>

  </div>
</template>

<script>
  import CommonTree from "../../common/CommonTree";
  import CommonList from "../../common/CommonList";
  export default {
      data(){
          return{
              activeName:'first',
              conditions:[],
              columns:[
                  {
                      prop:'',
                      label:'业务名称',
                      customSet(value) {
                          return "后台操作"
                      },
                  },
                  {
                      prop:'userAccount',
                      label:'登录账号',
                  },
                  {
                      prop:'sysLoginLogIp',
                      label:'登录IP',
                  },
                  {
                      prop:'sysLoginLogTime',
                      label:'登录日期',
                  },
                  {
                      prop:'sysLoginLogStatus',
                      label:'登录状态',
                  },
                  {
                      prop:'ownerAddress',
                      label:'IP所属地',
                  }
              ],
              operationColumns:[
                  {
                      prop:'module',
                      label:'操作模块',
                  },
                  {
                      prop:'description',
                      label:'操作功能',
                  },
                  {
                      prop:'userAccount',
                      label:'操作账户',
                  },
                  {
                      prop:'createTime',
                      label:'操作时间',
                  },
                  {
                      prop:'memo',
                      label:'接口参数',
                  }
              ],
              treeProps: {
                  children: 'children',
                  label: 'organizationName'
              },
              treeData:[],
              start:'',
              end:'',
              startTime:'',
              endTime:'',
              userAccount:'',
              module:'',
              description:'',

          }
      },
      methods: {
          handleClick() {

          },
          initData() {
              this.$http.get(this.$api.API_RMBASE_SYSTEM_LOGLIST).then(resp=>{
                  this.treeData = resp
              },msg=>{})
          },
          conditionsChange(e,type) {
            if (e) {
                for (let i=0;i<this.conditions.length;i++) {
                    if (this.conditions[i].prop == type) {
                        this.conditions[i].value = e
                        return
                    }
                }
                this.conditions.push({prop:type,value:e,checked:true})
            } else {
                for (let i=0;i<this.conditions.length;i++) {
                    if (this.conditions[i].prop == type) {
                       this.conditions.splice(i,1)
                    }
                }
            }
          },
          onSubmit() {
            this.$refs.list.search()
          },
          clearLog() {
              alert('clear')
          }
      },
      created() {
          this.initData()
      },
      components:{CommonTree,CommonList}
  }
</script>

<style lang="less" scoped>
  /deep/.el-tabs__header{
    margin: 0 !important;
  }

  /deep/.el-form-item{
    margin: 0;
    padding: 10px;
  }

  .main-label{
    border: #ccc 1px solid;
    border-bottom: 0;
    background-image: url(../../../assets/img/datagrid_header_bg.gif);
    background-repeat: repeat-x;
    height: 27px;
    line-height: 27px;
    font-weight: bold;
    padding-left: 5px;
    .clear-btn{
      float: right;
      color: #409EFF;
      font-weight: normal;
      margin-right: 10px;
      cursor: pointer;
    }
  }
</style>
